
<span class="page-title"><i class="fa fa-dashboard"></i> Dashboards</span>

<section class="content-header">
    <h1>
        <i class="fa fa-dashboard"></i> Current -

        <div ng-if="ctrl.editMode" style="display:inline-block">
            <form ng-submit="ctrl.save($event)" class="navbar-form no-padding no-margin" role="form">
                <div class="input-group">
                    <input type="text" name="title" class="form-control" ng-value="ctrl.dashboard.title" />
                    <input type="hidden" name="id" class="form-control" ng-value="ctrl.dashboard.id" />
                    <div class="input-group-btn">
                        <button class="btn btn-info" type="submit" title="Save (CTRL + S)"><i class="fa fa-save"></i></button>
                        <button class="btn btn-danger" type="button" ng-really-click="ctrl.delete()" title="Delete Dashboard #${ctrl.dashboard.id}"><i class="fa fa-remove"> Delete</i></button>
                    </div>
                </div>
            </form>
        </div>

        <div ng-if="!ctrl.editMode" style="display:inline-block">
            <a href="javascript:void(0)" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false">${ctrl.dashboard.title} &nbsp;<span class="caret"></span></a>
            <ul class="dropdown-menu" role="menu">
                <li ng-repeat="current in ctrl.dashboardList"><a href="javascript:void(0)" target="_self" ng-click="ctrl.activateDash(current);">${current.title} #${$index+1}</a></li>
            </ul>
        </div>

    </h1>

    <ol class="breadcrumb">
        <li><a href="javascript:void(0);" ng-if="!ctrl.editMode" ng-click="ctrl.toggleEdit(true)" class="btn btn-info pull-right" title="Edit (F2) | Save (Ctrl+S)"><i class="fa fa-edit"></i></a></li>
        <li><a href="javascript:void(0);" ng-if="ctrl.editMode" ng-click="ctrl.toggleEdit(false)" class="btn btn-warning pull-right" title="Cancel Edition (F2)"><i class="fa fa-reply"></i></a></li>

        <li><a ng-click="ctrl.addNewView()" class="btn btn-info pull-right" role="button" title="Key: F3"><i class="fa fa-plus"></i> New Item/Chart</a></li>
        <li><a ng-click="ctrl.addNewDash()" class="btn btn-info pull-right" role="button"><i class="fa fa-plus"></i> New Dashboard</a></li>
    </ol>
</section>

<!-- Main content -->
<section class="content dashboard-page" data-ng-init="ctrl.init()">

    <!----------------------------------------------------------------->
    <!-- Add Dashboards Actions                                      -->
    <!----------------------------------------------------------------->

    <div class="sidebar-content animate-show noselect ng-cloak" ng-init="ctrl.updateSidebar()">
            <div class="dash-add-box small-box bg-aqua" ng-click="ctrl.addNewView('LINE_CHART')" >
                <div class="inner">
                    <h3>Line Chart</h3>
                </div>
                <div class="icon">
                    <i class="fa fa-line-chart"></i>
                </div>
                <a href="javascript:void(0);"  class="small-box-footer">Add New <i class="fa fa-arrow-circle-right"></i>
                </a>
            </div>
            <div class="dash-add-box small-box bg-green" ng-click="ctrl.addNewView('PIE_CHART')">
                <div class="inner">
                    <h3>Pie Chart</h3>
                </div>
                <div class="icon">
                    <i class="fa fa-pie-chart"></i>
                </div>
                <a href="javascript:void(0);"  class="small-box-footer">Add New <i class="fa fa-arrow-circle-right"></i>
                </a>
            </div>
            <div class="dash-add-box small-box bg-yellow" ng-click="ctrl.addNewView('GAUGE_CHART')">
                <div class="inner">
                    <h3>Gauge</h3>
                </div>
                <div class="icon">
                    <i class="fa fa-dashboard"></i>
                </div>
                <a href="javascript:void(0);"  class="small-box-footer">Add New <i class="fa fa-arrow-circle-right"></i>
                </a>
            </div>
            <div class="dash-add-box small-box bg-red" ng-click="ctrl.addNewView('DYNAMIC_VALUE')">
                <div class="inner">
                    <h3>Dyn. Value</h3>
                </div>
                <div class="icon">
                    <i class="fa fa-font"></i>
                </div>
                <a href="javascript:void(0);"  class="small-box-footer">Add New <i class="fa fa-arrow-circle-right"></i>
                </a>
            </div>
            <div class="dash-add-box small-box bg-red" ng-click="ctrl.addNewView('DIGITAL_CONTROLLER')">
                <div class="inner">
                    <h3>Digital Ctrl</h3>
                </div>
                <div class="icon">
                    <i class="fa fa-font"></i>
                </div>
                <a href="javascript:void(0);"  class="small-box-footer">Add New <i class="fa fa-arrow-circle-right"></i>
                </a>
            </div>
            <div class="dash-add-box small-box bg-red" ng-click="ctrl.addNewView('DIGITAL_CONTROLLER')">
                <div class="inner">
                    <h3>Analog Ctrl</h3>
                </div>
                <div class="icon">
                    <i class="fa fa-font"></i>
                </div>
                <a href="javascript:void(0);"  class="small-box-footer">Add New <i class="fa fa-arrow-circle-right"></i>
                </a>
            </div>
            <div class="dash-add-box small-box bg-red" ng-click="ctrl.addNewView('IMAGE_CONTROLLER')">
                <div class="inner">
                    <h3>Image/Video</h3>
                </div>
                <div class="icon">
                    <i class="fa fa-photo"></i>
                </div>
                <a href="javascript:void(0);"  class="small-box-footer">Add New <i class="fa fa-arrow-circle-right"></i>
                </a>
            </div>
    </div>


    <!----------------------------------------------------------------->
    <!-- Dashboards List                                             -->
    <!----------------------------------------------------------------->


    <div class="dashboards no_selection" data-gridster="ctrl.gridConf" >
        <ul ng-init="ctrl.onGridInit(this)">
            <li data-gridster-item="item.layout" data-itemid="${item.id}" data-index="${$index}"
                data-row="${item.layout.row}" data-col="${item.layout.col}" data-sizex="${item.layout.sizex}" data-sizey="${item.layout.sizey}"
                ng-repeat="item in ctrl.dashboardItems"
                ng-click="ctrl.setItemFocus($index)"
                ng-init="$last && ctrl.onRenderDashboardItems(this)">

                <div class="dash-wrapper" ng-init="ctrl.addItemListener(this, item)">
                    <div class="dash-header" ng-class="ctrl.editMode ? 'dash-move' : ''" ng-if="item.title">
                        <h3>${item.title}</h3>
                    </div>

                    <div class="dash-actions">
                        <span ng-click="ctrl.updatePeriod($index, true)" title="Increment Period to ${item.periodValue + 1} ${item.periodType} (key: +)" ng-show="!item.realtime"><i class="fa fa-plus"></i></span>
                        <span ng-click="ctrl.updatePeriod($index, false)" title="Decrement Period to ${item.periodValue - 1} ${item.periodType} (key: -)" ng-show="!item.realtime"><i class="fa fa-minus"></i></span>
                        <span ng-click="ctrl.editItem($index)" title="Configuration (F2)"><i class="fa fa-sliders"></i></span>
                        <span ng-click="ctrl.removeItem($index)" title="Remove" ng-show="ctrl.editMode"><i class="fa fa-remove"></i></span>
                    </div>

                    <div class="dash-body">
                        <!-- No content required -->
                    </div>

                    <!--<div class="dash-footer">Footer</div>-->
                </div>
            </li>
        </ul>
    </div>

</section>



<!----------------------------------------------------------------->
<!-- New Dashboard                                                  -->
<!----------------------------------------------------------------->
<div id="new-dash" class="modal fade" ng-controller="NewDashController as controller" ng-init="controller.init()" tabindex="-1" role="dialog" aria-labelledby="newDashboardLabel">
    <div class="modal-dialog" role="document">
        <form class="form-horizontal" ng-submit="controller.save()">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="newDashboardLabel">Dashboard</h4>
                </div>
                <div class="modal-body">
                        <div class="box-body">
                            <div class="form-group">
                                <label class="col-sm-2 control-label">Title</label>
                                <div class="col-sm-10">
                                    <input type="text" class="form-control" ng-model="controller.current.title" required/>
                                </div>
                            </div>
                        </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-primary" >Save changes</button>
                </div>
            </div>
        </form>
    </div>
</div>


<!----------------------------------------------------------------->
<!-- New Item/Chart                                              -->
<!----------------------------------------------------------------->


<div id="new-item-dialog" class="modal fade" ng-controller="NewItemController as controller" ng-init="controller.init()" tabindex="-1" role="dialog" aria-labelledby="newDashboardItemLabel">
    <div class="modal-dialog" role="document">
        <form class="form-horizontal" ng-submit="controller.save()">
            <div ng-include="'/pages/subpages/new-dashview.html'"></div>
        </form>
    </div>
</div>

<!-- /.content -->
